<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="submit-success">
    <view class="ml-5 block" :style="{ paddingTop: topEdgeDistance + 15 + 'rpx' }">
      <wd-icon name="thin-arrow-left" size="30rpx" @click="handleBack"></wd-icon>
    </view>
    <view class="flex flex-col justify-center items-center mt-15">
      <wd-icon name="check-circle-filled" size="80rpx"></wd-icon>
      <text class="mt-3 text-lg font-bold">订单提交成功</text>
      <text class="mt-3 text-sm">需支付：￥{{ query.totalAmount }}</text>
      <view class="mt-8">
        <htm-button plain custom-class="!text-white !bg-transparent" @click="toOrderDetail">
          <text>查看订单</text>
        </htm-button>
        <htm-button plain hairline custom-class="!ml-3" @click="handlePay">立即付款</htm-button>
      </view>
    </view>
    <view class="h-30 mt-8 rounded-xl bg-white text-black p-5 text-sm">
      <view>
        <text class="text-gray-400">订单编号</text>
        <text class="ml-5">{{ query.orderCode }}</text>
      </view>
      <view class="mt-5">
        <text class="text-gray-400">订单金额</text>
        <text class="ml-5">￥{{ query.totalAmount }}</text>
      </view>
      <view class="mt-5">
        <text class="text-gray-400">收货信息</text>
        <text class="ml-5">￥{{ query.receiveInfo }}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
//
import { preUnifieAppletdorder } from '@/service/shopcart/shopcart'
const query = ref<any>({})
const handleBack = () => {
  uni.switchTab({
    url: '/pages/shopcart/shopcart',
  })
}
const systemInfo = uni.getSystemInfoSync()
// 状态栏的高度
const statusBarHeight = systemInfo.statusBarHeight
// 在有些平台上，可以直接获取到刘海屏的高度
const notchHeight = systemInfo.safeArea ? systemInfo.safeArea.top : 0
// 顶边距离
const topEdgeDistance = statusBarHeight + notchHeight
console.log(topEdgeDistance)

const toOrderDetail = () => {
  uni.navigateTo({
    url: '/pages/order-detail/orderDetail?orderCode=' + query.value.orderCode,
  })
}

const handlePay = async () => {
  try {
    const response = await preUnifieAppletdorder(query.value.orderCode)
    if (response.success) {
      uni.navigateToMiniProgram({
        appId: response.result.useAppid,
        path: response.result.appletUrl,
        success: (res) => {
          // 打开成功
          uni.showToast({
            title: JSON.stringify(res),
            icon: 'none',
          })
        },
        fail: (fail) => {
          uni.showToast({
            title: JSON.stringify(fail),
            icon: 'none',
          })
        },
      })
    } else {
      uni.showToast({
        title: response.message,
        icon: 'none',
      })
    }
  } catch (e) {}
}
onLoad((options) => {
  query.value = options
})
</script>

<style lang="scss" scoped>
//
.submit-success {
  width: 100vw;
  height: 45vh;
  color: white;
  background: linear-gradient(to bottom, var(--wot-color-theme), #ffa2a2);
}
</style>
